import { Meta } from '@storybook/addon-docs'; import image01 from './assets/busqueda/1.png'; import image02 from './assets/busqueda/2.png'; import image03 from './assets/busqueda/3.png'; import image04 from './assets/busqueda/4.png'; import image05 from './assets/busqueda/5.png'; import image06 from './assets/busqueda/6.png'; import image07 from './assets/busqueda/7.png'; import image08 from './assets/busqueda/8.png'; import image09 from './assets/busqueda/9.png'; import image10 from './assets/busqueda/10.png'; # Búsqueda / Search La búsqueda es un patrón esencial para la navegación o la exploración de soluciones. La búsqueda permite al usuario especificar una palabra o frase para encontrar contenido relevante sin necesidad de usar la navegación. Estamos en la era de la búsqueda y por ello las expectativas de los usuarios en términos de búsqueda han crecido mucho en los últimos tiempos. La búsqueda se base en un componente elemental que es el **buscador**, siempre accesible en la cabecera de la página, pero también en lugares relevantes como en la página de inicio. Este componente que permite una búsqueda en sentido amplio, va ligado a una **página de búsqueda**, una página específica que permite refinar los resultados de la misma, así como una exploración más profunda. ### Componente buscador El componete buscador es un componente complejos que se compone de componentes menores: - **Filtro** de búsqueda. Permite al usiario acotar la primera búsqueda a una ciuerta categoría, tipo de información, sección… En la sede el filtro de búsqueda nos permite realizar una búsuqeda solo en los trámites o en otras zonas de información. - **Icono** de búsqueda. El icono universal de la lupa se emplea para identificar la función de búsqueda. Es el mismo icono utilizado en la cabecera para la utilidad de búsqueda. - **Caja de texto** para la búsqueda. Lugar donde el usuario escribe el texto que desea buscar. - **Inidicaciones** de búsqueda. Son elementos de soporte, como el texto de ejemplo en el interior de la caja, como en la Sede «¿Qué es lo que buscas hoy?» o aclaraciones encima o debajo del componente como «Busca en la Sede Electrónica».
Este componente permite las mismas **variaciones** que los componentes que lo conforman, como por ejemplo la versión más clara que es la que se integra sobre fondos oscuros, como el fondo negro de la utilidad de búsqueda de la cabecera.
Además este componente presenta variaciones en **altura** de varios tamaños 48px, 40px o 32px que le permite integrarse en distintos contextos como la página de inicio, la utilidad de búsqueda, la propia página de búsqueda o incluso dentro de otros componentes como tablas o agrupaciones de tarjetas. La versión habitual es la ampliada, es decir la de 48px puesto que le da una mayor relevancia para su función tan importante. Por último, el **comportamiento** del componente va unido a los resultados de la búsqueda, que es a donde conduce. Al clicar en la imagen de la lupa o al pulsar «intro» una vez escrito el texto de búsqueda, este componente lleva a la página de búsqueda con la infoirmación de búsqueda copiada y los resultados de la búsqueda mostrada. En cuanto al comportamiento entre los componentes, la seleccion de un filtro de búsqueda conduce inmediatamente a la caja de texto y la introducción de texto si esta está vacía, o a la página de resultado si está llena. Adicionalmente, al introducir un texto, aparece in icono de una «x» para limpiar el texto de búsqueda introducido.
En cuanto a la **anatomía** del componente, este hereda la anatomía de los que lo conforman, aplicando las reglas de agrupación tipicas.
Los **estados** de este componente son los mismos que los componentes que lo conforman. ### Página de búsqueda y resultados La página de búsqueda y resultados es una parte muy importante de la experiencia de búsqueda del usuario, y por tanto presenta una oportunidad para satisfacer las necesidades de información de los usuarios. La función principal de esta página es la de presentar los elementos que coincidan con la búsqueda determinada que haya realizado el usuario, sirviéndoles así de guía en su búsqueda y permitir refinar la búsqueda deseada. La página de búsqueda y resultados se compone de varios **elementos**, el buscador, los resultados y los filtros. El **buscador** se corresponde con el componente buscador descrito anteriormente. Además este componente lleva asociados los **filtros aplicados** a la búsqueda mediante etiquetas que se pueden eliminar. En segundo lugar nos encontramos con el apartado de características informativas, compuesto por el número de **resultados** encontrados en base al término de búsqueda que haya introducido el usuario y los filtros aplicados, con la opción de ordenar los resultados en base a una serie de criterios como por ejemplo relevancia, fecha, etc… Por último nos encontramos con el apartado de filtros, situados en la parte derecha de la página, mediante los cuales el usuario podrá acotar la búsqueda en base a una serie de criterios definidos según el contenido de la página, pudiendo seleccionar uno o varios, así como poder borrar la selección. A continuación y para el más sencillo entendimiento de la página de búsqueda, presentamos un **ejemplo de una página simulando una página de búsqueda** de la Sede electrónica.
Esta página se muestra cuando el usuario realiza una búsqueda utilizando el buscador de la cabecera o desde la página principal, mostrando los resultados en base a la búsqueda y/o a los filtros utilizados por el usuario. Esta información se irá actualizando según se vaya variando el texto de búsqueda o los filtros aplicados. En cuanto a los resultados de búsqueda hay múltiples posibilidades de presentarlos, bien en forma de **tarjetas**, mostrando los resultados de una manera visual más concisa, facilitando de esta manera un escaneo visual más rápido, o en forma de **lista** consistentes en títulos con enlace al contenido correspondiente, con una breve descripción del contenido.
El **formato** de cada elemento de resultados, se adaptarán en cada caso a las necesidades de cada elemento concreto, pudiéndose presentar desde informaciones simples como un texto que identifica el resultado, o introduciendo más información como la descripción, o incluyendo elementos más complejos como etiquetas, iconos identificativos… Asimismo, los **tamaños** y **disposiciones** de las tarjetas de resultados se adaptarán a las necesidades concretas de cada solución. A continuación mostramos dos ejemplos ……y para el más sencillo entendimiento de la página de búsqueda, presentamos un **ejemplo de una página simulando una página de búsqueda** de la Sede electrónica.
Resultados de búsqueda dispuestos visualmente en dos columnas.
Dependiendo del contenido, los resultados de búsqueda podrán requerir los diseños de manera diferente, requiriendo algunos mostrarse en forma de lista y otros en forma de tarjetas, pudiendo combinar ambas opciones para mostrar los resultados de la manera más apropiada a su contenido. La página de resultados de búsqueda dispondrá de un **panel lateral** situado en la parte de la derecha con diferentes filtros de búsqueda que se pueden aplicar para ayudar y guiar al usuario en su búsqueda. Estos filtros se adaptarán al contenido de la página, existiendo diferentes tipos de componentes en base al contenido, como puedan se desplegables, botón de radio, casillas, etc.. En cuanto a la **anatomía** de la página de búsqueda y resultados, se emplearán los mismos criterios que en el panel de contenidos, respecto a las distribuciones y espaciados. - Macro espaciado grande y regular (48px y 32px) para las separaciones entre secciones y bloques. - Espaciado regular (16px) para la separación de párrafos en tipografías normales. - Espaciado reducido (8px) para separación de párrafos en tipografías menores. Cada elemento de resultado se construirá con una anatomía propia de cada solución.